<template>
  <div style="width: 80%; margin: 10px auto">

    <div ref="divRef"
         style="background-color: white; padding: 20px; border: 1px solid #ccc; border-radius: 10px; height: 400px; overflow-y: scroll;">
      <div v-for="item in messages" :key="item.id">
        <div style="display: flex; margin: 20px 0;" v-if="user.uid !== item.uid">
          <el-popover
              placement="top-start"
              :width="100"
              trigger="hover"
          >
            <template #reference>
              <img :src="item.avatar" alt="" style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px">
            </template>
            <div style="line-height: 20px">
              <div style="font-size: 16px">{{ item.username }}</div>
              <div style="font-size: 12px;">{{ item.sign }}</div>
            </div>
          </el-popover>
          <!--          <div style="width: 50px; line-height: 30px; margin-left: 5px; color: #888; overflow: hidden; font-size: 14px">{{ item.username }}</div>-->
          <div
              style="line-height: 30px; background-color: aliceblue; padding: 0 10px; width:fit-content; border-radius: 10px">
            {{ item.text }}
          </div>
        </div>

        <div style="display: flex; justify-content: flex-end; margin: 20px 0;" v-else>
          <div
              style="line-height: 30px; background-color: lightyellow; padding: 0 10px; width:fit-content; border-radius: 10px;">
            {{ item.text }}
          </div>
          <el-popover
              placement="top-start"
              :width="100"
              trigger="hover"
          >
            <template #reference>
              <img :src="item.avatar" alt="" style="width: 30px; height: 30px; border-radius: 50%; margin-left: 10px">
            </template>
            <div style="line-height: 20px">
              <div style="font-size: 16px">{{ item.username }}</div>
              <div style="font-size: 12px;">{{ item.sign }}</div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>

    <div style="margin: 10px 0; width: 100%">
      <div id="exampleInputEmoji">
        <div class="your-input-box">
          <input type="text" v-model="text" />
          <button @click="toogleDialogEmoji" style="margin-left: 10px">😃</button>
          <button @click="send" style="margin-left: 10px" >发送</button>
        </div>
        <VEmojiPicker
            v-show="showDialog"
            :style="{ width: '440px', height: '200' }"
            labelSearch="Search"
            lang="pt-BR"
            @select="onSelectEmoji"
        />
      </div>
    </div>

  </div>
</template>
<script>
import {VEmojiPicker} from 'v-emoji-picker'
export default {
  name: "Im",
  components: {
    VEmojiPicker
  },
  data() {
    return {
      messages: [],
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      divRef: null,
      text: "",
      showDialog: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollBottom();
    });

    this.$request.get("/im/init/10").then(res => {
      this.messages = res.data;
      this.scrollBottom();
    });

    this.client = new WebSocket(`ws://localhost:9090/imserver/${this.user.uid}`);
    this.client.onopen = () => {
      console.log('open');
    };
    this.client.onclose = () => {
      console.log('close');
    };
    this.client.onmessage = (msg) => {
      if (msg.data) {
        let json = JSON.parse(msg.data);
        if (json.uid && json.text) {
          this.messages.push(json);
          this.scrollBottom();
        }
      }
    };
  },
  beforeDestroy() {
    // 在组件销毁前关闭 WebSocket 连接
    if (this.client) {
      this.client.close();
    }
  },
  methods: {
    scrollBottom() {
      this.$nextTick(() => {
        this.divRef.scrollTop = this.divRef.scrollHeight;
      });
    },
    send() {
      if (this.client) {
        this.client.send(this.text);
      }
      this.text = '';
    },
    // 将v-emoji-picker中选择的表情添加到评论内容中
    toogleDialogEmoji() {
      console.log("Toogle!");
      this.showDialog = !this.showDialog;
    },
    onSelectEmoji(emoji) {
      this.text += emoji.data;
      // Optional
      // this.toogleDialogEmoji();
    }
  },
}
</script>


<style scoped>
#exampleInputEmoji {
  position: relative;
}

.your-input-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

input {
  padding: 8px;
  font-size: 16px;
  margin-right: 2px;
  border-radius: 4px;
  border: 1px solid #848484;
}

button {
  background: #ececec;
  border-radius: 4px;
  padding: 5px;
  font-size: 22px;
  border: 1px solid #848484;
}
</style>
